<template>
  <div>
	 <div class="search">
	   <input v-model="keyword" class="search-input" placeholder="请输入名称或拼音">
   </div>
   <div class="search-content" ref="search" v-show="keyword">
     <ul>
       <li class="search-item border-bottom" v-for="item in list" :key="item.id" @click="hotBtnClik(item.name)">{{item.name}}</li>
       <li class="search-item border-bottom" v-show="hasNoData">没有匹配到数据</li>
     </ul>
   </div>
 </div> 
</template>

<script>
import Bscroll from 'better-scroll'
import {mapMutations} from 'vuex'
export default {
	name:'CitySearch',
  props:{
   cities : Object
  },
  data () {
    return{
      keyword:'',
      list:[],
      timer:null
    }
  },
  watch:{
    keyword () {
    if (this.timer) {
      clearTimeout(this.timer)
     }
     if (!this.keyword) {
      this.list = []
      return
     }
     this.timer = setTimeout(()=>{
      const result = []
      console.log(this.cities)
      for(let i in this.cities){
         console.log(i)
        this.cities[i].forEach((value) =>{
          if (value.spell.indexOf(this.keyword)> - 1 ||
              value.name.indexOf(this.keyword)> -1) {
            // console.log(value)
            result.push(value)
          }
        })
      }
      this.list = result
     },100) 
    }
  },
  mounted (){
    this.scroll = new Bscroll(this.$refs.search)
  },
  methods:{
      hotBtnClik (city) {
     // this.$store.commit('changeCity',city)
     this.changeCity(city)
     this.$router.push('/')
    },
    ...mapMutations(['changeCity'])
  },
  computed:{
    hasNoData () {
      return !this.list.length
    }
  }
}	

</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
  .search
  	margin-top: -1px
  	padding:0.1rem
  	background:$bgcolor
  	.search-input
  		box-sizing:border-box
  		width:100%
  		height:.62rem
  		padding:0.1rem
  		line-height:.62rem
  		text-align:center
  		border-radius:0.1rem
  		color:#666
 .search-content
    z-index:1
    overflow:hidden
    position:absolute
    top:1.65rem
    left:0
    right:0
    bottom:0
    background:#eee 
    .search-item
      line-height:.66rem
      padding-left:.2rem
      color:#666
      background:#fff
</style>